<template>
  <NuxtLayout>
    <div class="main-container">
      <common-breadcrumb :to-name="'exam-list'" :to-title="'考试中心'" :title-name="'试卷内容'" />
      <div class="exam-info">
        <div class="info-desc">
          <exam-tag :exam-type="examInfo.examType" /> &nbsp;{{ examInfo.examName }}
          <div class="text-color">
            <!--试卷描述-->
            <paper-desc :exam-info="examInfo" />
            <br />
            <!--考试描述-->
            <exam-desc :item="examInfo" />
          </div>
        </div>
        <div class="info-button">
          <!--价格显示-->
          <common-price :price="examInfo.price" :line-price="examInfo.linePrice" />
          <div v-if="examInfo.examType === 1">
            <!--模拟考试-->
            <!-- residueExamCount：剩余考试次数，-1:表示无限次 -->
            <el-button v-if="examInfo.residueExamCount === '0'" type="info" size="large"> 已完成 </el-button>
            <el-button v-else-if="examInfo.price > 0 && !examInfo.payment" type="primary" size="large" @click="handleStart">
              <span>￥{{ examInfo.price }} &nbsp;购买考试</span>
            </el-button>
            <el-button v-else type="primary" size="large" @click="handleStart"> 马上考试 </el-button>
          </div>
          <div v-if="examInfo.examType === 2">
            <!--正式考试-->
            <!-- registrationStatus：报名状态(1:未开始、2:报名中、3:已结束) registrationUserStatus：用户报名状态(true:已报名,false:未报名) -->
            <el-button v-if="examInfo.registrationStatus === 1" type="info" size="large"> 待开启报名 </el-button>
            <el-button v-if="examInfo.registrationStatus === 2 && !examInfo.registrationUserStatus" type="primary" size="large" @click="handleRegistration">
              <span v-if="examInfo.price > 0">￥{{ examInfo.price }} &nbsp;</span>马上报名
            </el-button>
            <el-button v-if="(examInfo.registrationStatus === 3 && !examInfo.registrationUserStatus) || endTime < 0" type="info" size="large"> 已结束 </el-button>
            <el-button v-if="examInfo.registrationUserStatus && startTime <= 0 && endTime > 0" type="primary" size="large" @click="handleStart"> 马上考试 </el-button>
            <span v-if="examInfo.registrationUserStatus && startTime > 0"> 离考试开始还剩：<common-time :exam-time="startTime" :tip="'开始'" @callback="handleStartTime" /> </span>
          </div>
        </div>
        <el-divider />
        <div class="text-color">考试说明：{{ examInfo.description }}</div>
      </div>
      <div v-if="getToken()" class="exam-record">
        <el-tabs>
          <el-tab-pane label="我的记录">
            <exam-record :exam-type="examInfo.examType" :relate-id="examInfo.id" :result-show="examInfo.resultShow" />
          </el-tab-pane>
          <el-tab-pane v-if="examInfo.rankList" label="排序榜">
            <exam-rank :exam-type="examInfo.examType" :relate-id="examInfo.id" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </NuxtLayout>
</template>
<script setup>
  import { examApi } from '~/api/exam'
  import { getToken } from '~/utils/cookie'
  import { getTimeDiff } from '~/utils/base'
  const route = useRoute()

  const startTime = ref(0)
  const endTime = ref(0)
  onMounted(async () => {
    startTime.value = getTimeDiff(examInfo.value.examStartTime)
    endTime.value = getTimeDiff(examInfo.value.examEndTime)
  })
  const handleStartTime = () => {
    startTime.value = 0
  }

  // 考试报名，适用于正式考试
  const handleRegistration = () => {
    if (examInfo.value.price > 0) {
      // 购买
      useRouter().push({ name: 'goods-order', query: { goodsType: 1, goodsId: route.query.id } })
      return
    }
    if (examInfo.value?.registrationUserStatus) {
      ElMessage.error('请勿重复报名')
      return
    }
    // 报名
    examApi.examRegistration({ examId: route.query.id }).then((res) => {
      ElMessage.success('报名成功')
      examInfo.value.registrationUserStatus = true
    })
  }

  // 开始考试
  const handleStart = () => {
    if (examInfo.value.price > 0 && !examInfo.value.payment) {
      // 购买
      useRouter().push({ name: 'goods-order', query: { goodsType: 1, goodsId: route.query.id } })
      return
    }

    if (examInfo.value.examType === 1) {
      // 模拟考试
      useRouter().push({ name: 'exam-start', query: { id: route.query.id, examType: examInfo.value.examType } })
      return
    }
    if (examInfo.value.examType === 2) {
      // 正式考试
      if (examInfo.value?.registrationUserStatus) {
        useRouter().push({ name: 'exam-start', query: { id: route.query.id, examType: examInfo.value.examType } })
      } else {
        ElMessage.error('请先报名')
      }
    }
  }

  // 获取考试详情
  const { data: examInfo } = await useAsyncData(async () => {
    if (getToken()) {
      // 已登录
      return examApi.examUserDetail({ id: route.query.id })
    } else {
      // 未登录
      return examApi.examDetail({ id: route.query.id })
    }
  })

  useHead({
    title: examInfo.value?.examName
  })
</script>
<style lang="scss" scoped>
  .exam-info {
    padding: 20px;
    font-size: 14px;
    line-height: 40px;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    .info-button {
      display: flex;
      justify-content: space-between;
    }
  }
  .exam-record {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 20px;
  }
  .main-container {
    min-height: calc(100vh - $header-height - $footer-height);
    overflow: auto;
  }
</style>
